<template>
  <div class="login-container">
    <div class="ope-area">
      <div class="form-container">
        <div class="title">特殊教育学校管理后台</div>
        <div class="form-area">
          <div class="form-title">重置密码</div>
          <el-form
            ref="loginForm"
            :model="loginForm"
            :rules="loginRules"
            class="login-form"
            label-position="left"
          >
            <el-form-item prop="oldPassword">
              <span class="svg-container">
                <svg-icon icon-class="password" />
              </span>
              <el-input
                ref="oldPassword"
                v-model="loginForm.oldPassword"
                placeholder="请输入旧密码"
                name="oldPassword"
                :type="oldPasswordType"
              />
              <span class="show-pwd" @click="showPwd('oldPasswordType')">
                <svg-icon
                  :icon-class="oldPasswordType === 'password' ? 'eye' : 'eye-open'"
                />
              </span>
            </el-form-item>

            <el-form-item prop="newPassword">
              <span class="svg-container">
                <svg-icon icon-class="password" />
              </span>
              <el-input
                :key="passwordType"
                ref="password"
                v-model="loginForm.newPassword"
                :type="passwordType"
                placeholder="请输入新密码"
                name="newPassword"
                @keyup.enter.native="handleLogin"
              />
              <span class="show-pwd" @click="showPwd('passwordType')">
                <svg-icon
                  :icon-class="passwordType === 'password' ? 'eye' : 'eye-open'"
                />
              </span>
            </el-form-item>

            <el-form-item prop="newPasswordRepeat">
              <span class="svg-container">
                <svg-icon icon-class="password" />
              </span>
              <el-input
                :key="passwordType"
                ref="passwordRepeat"
                v-model="loginForm.newPasswordRepeat"
                :type="passwordRepeatType"
                placeholder="请重复输入新密码"
                name="newPasswordRepeat"
                @keyup.enter.native="handleLogin"
              />
              <span class="show-pwd" @click="showPwd('passwordRepeatType')">
                <svg-icon
                  :icon-class="passwordRepeatType === 'password' ? 'eye' : 'eye-open'"
                />
              </span>
            </el-form-item>

            <el-button
              :loading="loading"
              type="primary"
              style="width: 100%"
              @click.native.prevent="handleLogin"
            >确 定</el-button>
          </el-form>
        </div>
      </div>
    </div>

    <!-- <el-carousel :interval="4000" type="card" height="200px">
      <el-carousel-item v-for="item in 6" :key="item">
        <h3 class="medium">{{ item }}</h3>
      </el-carousel-item>
    </el-carousel> -->
  </div>
</template>

<script>
import { resetPassword } from '@/api/user'
export default {
  name: 'Login',
  data() {
    const that = this
    const validateOldPassword = (rule, value, callback) => {
      if (value.length < 6) {
        callback(new Error('请输入至少6位字符的旧密码'))
      } else {
        callback()
      }
    }
    const validatePassword = (rule, value, callback) => {
      if (value.length < 6) {
        callback(new Error('请输入至少6位字符的新密码'))
      } else {
        callback()
      }
    }
    const validatePasswordRepeat = (rule, value, callback) => {
      if (value !== that.loginForm.newPassword) {
        callback(new Error('两次输入的密码不一致'))
      } else {
        callback()
      }
    }
    return {
      loginForm: {
        oldPassword: '',
        newPassword: '',
        newPasswordRepeat: ''
      },
      loginRules: {
        oldPassword: [{ required: true, trigger: 'blur', validator: validateOldPassword }],
        newPassword: [
          { required: true, trigger: 'blur', validator: validatePassword }
        ],
        newPasswordRepeat: [
          { required: true, trigger: 'blur', validator: validatePasswordRepeat }
        ]
      },
      loading: false,
      oldPasswordType: 'password',
      passwordType: 'password',
      passwordRepeatType: 'password',
      codeUrl: ''
    }
  },
  methods: {
    showPwd(type) {
      if (this[type] === 'password') {
        this[type] = 'text'
      } else {
        this[type] = 'password'
      }
      this.$nextTick(() => {
        this.$refs.password.focus()
      })
    },
    handleLogin() {
      const that = this
      this.$refs.loginForm.validate(async valid => {
        if (valid) {
          this.loading = true
          const params = JSON.parse(JSON.stringify(that.loginForm))
          delete params.newPasswordRepeat
          try {
            const res = await resetPassword(params)
            if (res) {
              that.$message({
                message: '重置密码成功！',
                type: 'success'
              })
              // 退出登录
              await that.$store.dispatch('user/logout')
              that.$router.push(`/login`)
            }
            this.loading = false
          } catch (err) {
            console.log(err)
            debugger
            this.loading = false
          }
        } else {
          console.log('error submit!!')
          return false
        }
      })
    }
  }
}
</script>

<style lang="scss" scoped>
$bg: #498ffb;
$dark_gray: #889aa4;
$light_gray: #eee;

.login-container {
  background-color: $bg;
  background-image: url(../../assets/lt-bg.png), url(../../assets/rt-bg.png),
    url(../../assets/rb-bg.png);
  background-size: 614px 682px, 460px 550px, 688px 552px;
  background-repeat: no-repeat, no-repeat, no-repeat;
  background-position: top left, top right, bottom right;
  min-height: 100%;
  width: 100%;
  overflow: hidden;
  .ope-area {
    position: absolute;
    top: 50%;
    left: 50%;
    margin-top: -250px;
    margin-left: -600px;
    width: 1200px;
    height: 500px;
    background-image: url(../../assets/login-logo.png);
    background-repeat: no-repeat;

    .form-container {
      width: 500px;
      float: right;
      > .title {
        color: #fff;
        line-height: 50px;
        font-size: 36px;
        text-align: center;
        letter-spacing: 5px;
        margin-bottom: 30px;
      }

      > .form-area {
        margin: 0 auto;
        background: #fff;
        border-radius: 32px;
        width: 420px;
        .form-title {
          padding: 75px 0 40px 0;
          color: #049aef;
          line-height: 40px;
          font-size: 28px;
          text-align: center;
        }
        .login-form {
          width: 315px;
          margin: 0 auto;
          .el-form-item {
            margin-bottom: 20px;
            .el-form-item__content {
              position: relative;
              .svg-container {
                position: absolute;
                z-index: 1;
                top: 0;
                left: 16px;
                line-height: 40px;
                color: #b3b3b3;
              }
              .show-pwd {
                position: absolute;
                z-index: 1;
                top: 0;
                right: 16px;
                line-height: 40px;
                color: #b3b3b3;
              }
              .code-img {
                position: absolute;
                top: 2px;
                right: 2px;
                width: 120px;
                height: 36px;
                border-radius: 0 20px 20px 0;
              }
            }
          }

          ::v-deep .el-input__inner {
            background: #fff;
            border-radius: 20px;
            height: 40px;
            line-height: 40px;
            border: 2px solid #e5e5e5;
            padding-left: 40px;
            &:focus {
              border: 2px solid #049aef;
            }
            &:hover {
              border: 2px solid #049aef;
            }
            &::-webkit-input-placeholder {
              color: #666;
            }
            &::-moz-placeholder {
              color: #666;
            }
            &::-moz-placeholder {
              color: #666;
            }
            &:-ms-input-placeholder {
              color: #666;
            }
          }
          .el-button.el-button--primary {
            margin-top: 20px;
            height: 36px;
            line-height: 36px;
            padding: 0;
            border-radius: 18px;
            font-weight: 500;
            letter-spacing: 10px;
            margin-bottom: 80px;
            font-size: 16px;
          }
        }
      }
    }
  }
}
</style>
